<template>
  <div class="hello">
    <div class="tabs">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="(item, index) in chartOptions"
          :key="index"
          class="tabs-plane"
        >
          <!-- 折线图 -->
          <keep-alive>
            <div class="common-chart">
              <line-chart
                class="plane-chart"
                v-show="activeName === chartOptions[0].value"
                :data="chartData"
              ></line-chart>
              <bar-chart
                class="plane-chart"
                v-show="activeName === chartOptions[1].value"
                :data="chartData"
                :lineColor="lineColor"
                :lineThickness="lineThickness"
                :pointMarkerColor="pointMarkerColor"
                :fillColor="fillColor"
                :xAxisTitle="xAxisTitle"
                :yAxisTitle="yAxisTitle"
              ></bar-chart>
              <pie-chart
                class="plane-chart"
                v-show="activeName === chartOptions[2].value"
                :data="chartData"
              ></pie-chart>
              <heat-chart
                class="plane-chart"
                v-show="activeName === chartOptions[3].value"
              ></heat-chart>
              <real-time
                class="plane-chart"
                v-show="activeName === chartOptions[4].value"
              ></real-time>
              <high-performance
                class="plane-chart"
                v-show="activeName === chartOptions[5].value"
              ></high-performance>
              <scale-chart
                class="plane-chart"
                v-show="activeName === chartOptions[6].value"
              ></scale-chart>
            </div>
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref, nextTick } from 'vue';
import {
  SciChartSurface,
  NumericAxis,
  FastLineRenderableSeries,
  XyDataSeries,
  EllipsePointMarker,
  SweepAnimation,
  SciChartJsNavyTheme,
  NumberRange,
  MouseWheelZoomModifier,
  ZoomPanModifier,
  ZoomExtentsModifier,
} from 'scichart';
import lineChart from '@/components/sciChartComponents/lineChart/index.vue';
import barChart from '@/components/sciChartComponents/barChart.vue';
import pieChart from '@/components/sciChartComponents/pieChart.vue';
import heatChart from '@/views/sciChart/sciChart/components/heatMap.vue';
import realTime from '@/components/sciChartComponents/realTime.vue';
import highPerformance from '@/components/sciChartComponents/highPerformance/index.vue';
import scaleChart from '@/components/sciChartComponents/scale/index.vue';

const activeName = ref(0);

const chartOptions = ref([
  { label: '折线图', value: 0 },
  { label: '柱状图', value: 1 },
  { label: '饼图', value: 2 },
  { label: '热力图', value: 3 },
  { label: '实时曲线', value: 4 },
  { label: '大数据高性能', value: 5 },
  { label: '缩放', value: 6 },
]);

const handleClick = () => {};

const chartData = {
  xValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
  yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833],
};

// 柱状图
const lineColor = ref('#188df0'); // 柱状图边框颜色
const lineThickness = ref(1); // 柱状图边框粗细
const pointMarkerColor = ref('#FFFFFF'); // 点标记颜色
const fillColor = ref('#188df0'); // 柱子填充颜色（橙色）
const xAxisTitle = ref('Category'); // X 轴标题
const yAxisTitle = ref('Value'); // Y 轴标题

onMounted(() => {
  nextTick(() => {
    // 可以在这里初始化或设置任何必要的状态
    activeName.value = chartOptions.value[0].value; // 确保这行代码在你的逻辑中正确执行
  });
});
</script>

<style lang="scss" scoped>
.hello {
  width: 100vw;
  height: 100vh;
  .tabs {
    width: 100%;
    height: 100%;
    .demo-tabs {
      width: 100%;
      height: 100%;
      padding: 32px;
      box-sizing: border-box;

      .plane-chart {
        width: 100%;
        height: calc(100vh - 120px);
        margin: 0;
        padding: 0;
      }
      :deep(.el-tabs__item) {
        font-size: 24px;
      }
    }
  }
}

.sciChart-root {
  width: 100%;
  height: calc(100vh - 120px);
  margin: 0;
  padding: 0;
}
</style>
